<template>
	<HeaderNav />
	<article>
		<!-- 网站主体 -->
		<div id="main" class="catalog clearfix">
			<section class="menus">
				<h1 class="catlogs">资源分类</h1>
				<!-- 定义资源类型导航 -->
				<ResourceLeftNav v-model="typeId" :types="resourceTypes" @type-click="queryResources"/>
			</section>
			<!-- 定义左侧窗口信息 -->
			<section class="ct content">
				<!-- 定义每一个资源 -->
				<div class="bread-crumbs">
					<a @click="handlerType">资源分类</a>
					<a v-if="oneType ==null">全部</a>
					<template v-else>
						<a>{{oneType.name}}</a>
						<a v-if="twoType !=null">{{twoType.name}}</a>
					</template>
				</div>
				
				<ResourceItem v-for="(res, index) in resources" :key="index"
				              :ext="res.ext" :visit-num="res.visitNum"
				              :score="res.score" :title="res.resourceName"
				              :size="res.size" :id="res.id"
				              @click="$router.push({name: 'resource-detail', params: {id: $event}})"/>
				
				<!-- 分页插件 -->
				<VanPagination v-model="page" :totalItems="total" :itemsPerPage="12" :showPageSize="5" 
					:forceEllipses="true" />
				
			</section>
			
		</div>
	</article>
	<Footer />
</template>

<script>
import HeaderNav from "../components/HeaderNav.vue";
import Footer from "../components/Footer.vue"; 
import VanPagination from '../components/VanPagination.vue' ;
import ResourceItem from "../components/ResourceItem.vue";
import ResourceLeftNav from '../components/ResourceLeftNav.vue'

export default {
	components: {
		HeaderNav, 
		Footer,
		VanPagination,
		ResourceItem,
		ResourceLeftNav,
	},
	data() {
		return {
			page: 1, 
			total: 100,  
			oneType: null ,  // 一级分类
			twoType: null ,  // 二级分类
			typeId: -1 , // 查询的分类ID 
			resourceTypes: [
				{
					id: 1, 
					name: "开发技术" , 
					children: [
						{id: 10, name: "Java"} ,
						{id: 11, name: "Python"} ,
						{id: 12, name: "C#"} ,
					]
				},
				{
					id: 2, 
					name: "数据库" , 
					children: [
						{id: 20, name: "Oracle"} ,
						{id: 21, name: "SQL Server"} ,
						{id: 22, name: "Postgre"} ,
					]
				},
				{
					id: 3, 
					name: "云计算" , 
					children: [
						{id: 30, name: "微服务"} ,
						{id: 31, name: "Openstack"} ,
						{id: 32, name: "Docker"} ,
					]
				},
			],
			resources: [
			  {
			     id: 1,
			     resourceName: 'vc++6.0 绿色版 完整版（支持win7，win8系统）' ,
			     score: 5,
			     size: 34354667,
			     visitNum: 1034344340,
			     ext: 'zip' ,
			    },
			  {
			    id: 1,
			    resourceName: 'vc++6.0 绿色版 完整版（支持win7，win8系统）' ,
			    score: 5,
			    size: 34354667,
			    visitNum: 100,
			    ext: 'pdf' ,
			  },
			  {
			    id: 1,
			    resourceName: 'vc++6.0 绿色版 完整版（支持win7，win8系统）' ,
			    score: 5,
			    size: 34354667,
			    visitNum: 100,
			    ext: 'exe' ,
			  },
			  {
			    id: 1,
			    resourceName: 'vc++6.0 绿色版 完整版（支持win7，win8系统）' ,
			    score: 5,
			    size: 34354667,
			    visitNum: 100,
			    ext: 'pdf' ,
			  },
			  {
			    id: 1,
			    resourceName: 'vc++6.0 绿色版 完整版（支持win7，win8系统）' ,
			    score: 5,
			    size: 34354667,
			    visitNum: 100,
			    ext: 'avi' ,
			  },
			  {
			    id: 1,
			    resourceName: 'vc++6.0 绿色版 完整版（支持win7，win8系统）' ,
			    score: 5,
			    size: 34354667,
			    visitNum: 100,
			    ext: 'pdf' ,
			  },
			  {
			    id: 1,
			    resourceName: 'vc++6.0 绿色版 完整版（支持win7，win8系统）' ,
			    score: 5,
			    size: 34354667,
			    visitNum: 100,
			    ext: 'rmvb' ,
			  },
			  {
			    id: 1,
			    resourceName: 'vc++6.0 绿色版 完整版（支持win7，win8系统）' ,
			    score: 5,
			    size: 34354667,
			    visitNum: 100,
			    ext: 'png' ,
			  },
			  {
			    id: 1,
			    resourceName: 'vc++6.0 绿色版 完整版（支持win7，win8系统）' ,
			    score: 5,
			    size: 34354667,
			    visitNum: 100,
			    ext: 'txt' ,
			  },
			  {
			    id: 1,
			    resourceName: 'vc++6.0 绿色版 完整版（支持win7，win8系统）' ,
			    score: 5,
			    size: 34354667,
			    visitNum: 100,
			    ext: '7z' ,
			  },
			  {
			    id: 1,
			    resourceName: 'vc++6.0 绿色版 完整版（支持win7，win8系统）' ,
			    score: 5,
			    size: 34354667,
			    visitNum: 100,
			    ext: 'pdf' ,
			  },
			  {
			    id: 1,
			    resourceName: 'vc++6.0 绿色版 完整版（支持win7，win8系统）' ,
			    score: 5,
			    size: 34354667,
			    visitNum: 100,
			    ext: 'pdf' ,
			  }
			],
		}
	},
	methods: {
		queryResources(oneType, twoType) { // 获取一级类型和二级类型
			this.oneType = oneType ;
			this.twoType = twoType ;
			// 根据资源ID , 查询资源信息
			// ...
		},
		handlerType() {
			this.oneType = null ;
			this.twoType = null ;
			this.typeId = -1 ; 
		}
	}
}

</script>

<style>
</style>